<template>
  <div class="app-container">
    <FormCom class="form-search" ref="search" :columns="queryColumns" labelWidth="3em" v-show="showSearch"/>
    <div class="flr mb8">
      <div class="flbox">
        <el-button type="primary" plain @click="handleAdd">新增</el-button>
        <el-button type="warning" plain @click="handleExport">导出</el-button>
      </div>
      <div class="flone">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </div>
    </div>
    <TableCom :columns="tableColumns" :options="tableOptions" @getList="getList"></TableCom>
  </div>
</template>

<script>
  import indexVue from '@/config/indexVue';

  const editColumns = [
    {text: "分类", name: "cate", type: "select",size:10,options:"_tempCate"},
    {text: "排序", name: "index", type: "input",value:1,size:4},
    {text: "编码", name: "keyword", type: "input",size:10},
    {text: "内容", name: "content", type: "textarea"},
    {text: "图片", name: "pic", type: "uploadImg",value:"",accept:"image/*",limit:1},
  ]
  const editRule = {
    cate:["required"]
  }

  export default {
    name: "Temp",
    mixins:[indexVue],
    data() {
      this.actionName = "temp";
      this.editColumns = editColumns;
      this.editRule = editRule;
      this.queryColumns = [
        { text:"分类",name:"cate",type:"select",options:"_tempCate",onChange:this.handleQuery},
        { text:"编码",name:"keyword",type:"input",onKeyup:this.handleQuery},
        { type:"label",searchButton:{listQuery:this.handleQuery, listReset:this.resetQuery}}
      ]
      this.tableColumns = [
        { type:"index",fixed:true },
        {"prop":"cate","label":"分类","width":100,options:"_tempCate"},//,options:"_tempCate"
        {"prop":"keyword","label":"编码","width":120},
        //{"prop":"content","label":"内容","width":200},
        {"prop":"pic","label":"图片","minWidth":100,onClick:this.handlePic,template:"ColumnLink"},
        {"prop":"index","label":"排序","width":80},
        {"prop":"createTime","label":"创建时间","width":160},
        { label:"操作",prop:"_",width:"200",align:"center",fixed:"right",className:"",options:[
            {
              text:"修改",
              props:{class:'primary'},
              onClick:this.handleUpdate
            },
            {
              text:"删除",
              props:{class:'danger'},
              onShow(r){ return ['index_menu'].indexOf(r.cate)==-1 },
              onClick:this.handleDelete
            },
          ]
        }
      ]
      //
      return {}
    },
    mounted() {
      this.$refs.search.setData({
        cate:"index_nav",
        index:1
      })
      this.getList();
    },
    methods: {
      /** 新增按钮操作 */
      handleAdd(row) {
        this.dialogEdit({
          row,
          PATH_SAVE:`temp.add`,
          width:"640px",
          size:24,
          labelWidth:"4em",
          columns:this.editColumns,
          rules:this.editRule
        },()=>{
          this.getList();
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        if(row.cate == "index_menu"){
          this.handleNav(row);
          return;
        }
        this.dialogEdit({
          row,
          PATH_SAVE:`temp.edit`,
          width:"640px",
          size:24,
          labelWidth:"4em",
          columns:this.editColumns,
          rules:this.editRule
        },()=>{
          this.getList();
        })
      },
      handleNav(row){
        this.dialogEdit({
          row,
          PATH_SAVE:`temp.edit`,
          width:"940px",
          size:24,
          labelWidth:"4em",
          columns:[
            {text: "内容", name: "content", type: "textarea",props:{rows:16}},
          ]
        },()=>{
          this.getList();
        })
      },
      handlePic(r){
        window.open(r.pic)
      }
    }
  };
</script>
